/*全体样式*/
*{
    padding:0;
    margin:0;
}
body{
    background-color: #ffffff;
    color: #555555;
    font-family: 'Avenir Next','Lantinghei SC';
    font-size: 12px;

    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
}
/*界面*/
.wrap{
    width:100%;
    height: 600px;
    position: absolute;
    top:50%;
    margin-top: -300px;
    background-color: #333333;
    overflow: hidden;
    /*子元素获得3D效果支持*/
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
}
/*海报样式*/
.photo{
    width: 260px;
    height: 320px;
    position: absolute;
    z-index: 1;
    box-shadow: 0 0 1px rgba(0,0,0,0.01);
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
}
.photo .side{
    width:100%;
    height: 100%;
    background-color: #eeeeee;
    position: absolute;
    top:0;
    right:0;
    padding: 20px;
    box-sizing: border-box;
}

.photo .side-front .image{
    width: 100%;
    height: 250px;
    line-height: 250px;
    overflow: hidden;
}
.photo .side-front .image img{
    width: 100%;
    margin-top:-20px;
}
.photo .side-front .caption{
    text-align: center;
    font-size: 16px;
    line-height: 50px;

}
.photo .side-back .desc{
    color: #666666;
    font-size: 11px;
    line-height: 1.5em;
}
/*当前选中海报样式*/
.photo_center{
    /*margin 是宽高的一半，垂直水平居中*/
    margin: -160px 0 0 -130px;
    left:50%;
    top: 50%;
    z-index: 999;
}
/*负责翻转*/
.photo-wrap{
    position: absolute;
    width:100%;
    height: 100%;
    /*自持子元素3D效果*/
    -webkit-transform-style: preserve-3d;
    -webkit-transition: all 0.6s;
    -moz-transform-style: preserve-3d;
    -moz-transition: all 0.6s;
}
.photo .side-front{
    -webkit-transform:rotateY(0deg);
    -moz-transform:rotateY(0deg);
}
.photo .side-back{
    -webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
}
.photo .side{
     /*当元素不面向屏幕时隐藏*/
     -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
 }
.photo_front .photo-wrap{
    -webkit-transform:rotateY(0deg);
    -moz-transform:rotateY(0deg);
}
.photo_back .photo-wrap{
    -webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
}

/*控制按钮的样式*/
.nav{
    width:80%;
    height: 30px;
    line-height: 30px;
    position: absolute;
    left:10%;
    bottom: 20px;
    z-index: 999;
    /*background-color: #ffffff;*/
    text-align: center;
}
/*普通样式*/
.nav .i{
    width: 30px;
    height: 30px;
    display: inline-block;
    cursor: pointer;
    background-color: #aaaaaa;
    text-align: center;
    border-radius: 50%;
    /*正常状态下缩小标签，这样点击时放大就不会影响其他*/
    -webkit-transform: scale(0.48);
    -webkit-transition: all 0.6s;
    -moz-transform: scale(0.48);
    -moz-transition: all 0.6s;
}
/*当前选中样式*/
.nav .i_current{
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
}
/*背面样式*/
.nav .i_back{
    transform:rotateY(-180deg);
    background-color: #655555;
}
/*优化样式*/
.photo{
    margin: -160px 0 0 -130px;
    left:50%;
    top: 50%;
}
.photo-wrap{
    -webkit-transform-origin: 0% 50%;
    -moz-transform-origin: 0% 50%;
}
.photo_front .photo-wrap{
    -webkit-transform: translate(0px ,0px) rotateY(0deg);
    -moz-transform: translate(0px ,0px) rotateY(0deg);
}
.photo_back .photo-wrap{
    -webkit-transform: translate(260px ,0px) rotateY(180deg);
    -moz-transform: translate(260px ,0px) rotateY(180deg);
}
